<template>
	<div>
		<a-modal v-model="visible" title="预览" :destroyOnClose="true" width="40%">
			<a-form-model
				:label-col="{ span: formData.config.labelCol }"
				:wrapper-col="{ span: formData.config.wrapperCol }"
				:layout="formData.config.layout"
				:colon="formData.config.colon"
				:labelAlign="formData.config.labelAlign"
			>
				<a-form-model-item
					:label="item.showTitle && item.title"
					:required="item.required"
					v-for="(item, index) in formData.list"
					:key="index"
				>
					<FormItems :eleItem="item" />
					<div class="desc" v-if="item.desc">{{ item.desc }}</div>
				</a-form-model-item>
			</a-form-model>
			<div slot="footer">
				<a-button @click="cancel">取消</a-button>
				<a-button type="primary" @click="confirm">获取数据</a-button>
			</div>
		</a-modal>
	</div>
</template>

<script>
import FormItems from "./center/form-items.vue"
export default {
	name: "preview",
	components: {
		FormItems,
	},
	data() {
		return {
			visible: false,
			formData: {
                config:{},
                list:[]
            },
		}
	},

	mounted() {},

	methods: {
        show(data){
            this.formData = JSON.parse(JSON.stringify(data))
            this.visible = true
        },
		cancel() {
            this.visible = false
        },
		confirm() {
            this.visible = false
            this.$emit('getData');
        },
	},
}
</script>

<style lang="less" scoped>
.desc {
	word-break: break-all;
	line-height: 18px;
	font-size: 14px;
	color: #9b9b9b;
}
</style>
